<template>
  <el-dialog
    width="60%"
    title="审核"
    :visible.sync="petPublishDialog"
    :show-close="true"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="work-box flex">
      <div class="mobile">
        <div class="banner" v-show="popPetPublish.publishPath.length > 0">
          <el-carousel
            height="150px"
            arrow="always"
            v-if="popPetPublish.publishType == 1"
          >
            <el-carousel-item
              v-for="(item, index) in popPetPublish.publishPath"
              :key="index"
              :style="{ 'background-image': `url(${item})` }"
            >
            </el-carousel-item>
          </el-carousel>
          <video
            v-else
            :src="popPetPublish.publishPath"
            class="avatar"
            controls="controls"
          >
            您的浏览器不支持视频播放
          </video>
        </div>
        <div class="content" v-html="popPetPublish.publishContent"></div>
        <!-- <div class="footer flex space-between">
          <p class="flex flex-start"><el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar><span class="name">{{ popPetPublish.userName }}</span></p>
          <p><i class="el-icon-star-on"></i>30</p>
        </div> -->
      </div>
      <div class="work-des">
        <el-form
          ref="form"
          :model="petPublish"
          label-width="80px"
          :disabled="true"
        >
          <el-form-item label="发布人">
            <el-input v-model="popPetPublish.userName"></el-input>
          </el-form-item>
          <el-form-item label="发布编号">
            <el-input v-model="popPetPublish.publishId"></el-input>
          </el-form-item>
          <el-form-item label="发布地址">
            <el-input v-model="popPetPublish.positionAddr"></el-input>
          </el-form-item>
          <el-form-item label="发布内容">
            <div class="el-textarea is-disabled" resize="none">
              <div
                class="el-textarea__inner"
                style="min-height: 100px"
                v-html="popPetPublish.publishContent"
              ></div>
            </div>
          </el-form-item>
          <el-form-item
            :label="`发布${popPetPublish.publishType == 1 ? '照片' : '视频'}`"
          >
            <el-carousel
              height="200px"
              arrow="always"
              v-if="popPetPublish.publishType == 1"
            >
              <el-carousel-item
                v-for="(item, index) in popPetPublish.publishPath"
                :key="index"
                :style="{ 'background-image': `url(${item})` }"
              >
              </el-carousel-item>
            </el-carousel>
            <video
              v-else
              :src="popPetPublish.publishPath"
              class="avatar"
              controls="controls"
            >
              您的浏览器不支持视频播放
            </video>
          </el-form-item>

          <el-form-item label="发布时间">
            <el-input v-model="popPetPublish.publishTime"></el-input>
          </el-form-item>
          <!-- <el-form-item label="状态">
          <el-input v-model="popPetPublish.publishStatus"></el-input>
        </el-form-item> -->
        </el-form>
      </div>
    </div>
    <div slot="footer" v-show="!operateType">
      <el-button @click="closeHandler()">取消</el-button>
      <el-button type="success" @click="verify(2)">通过</el-button>
      <el-button type="info" @click="verify(3)">不通过</el-button>
      <el-button type="danger" @click="verify(4)">禁播</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  replaceUrlParam,
  petPublishSaveUrl,
  userByIdUrl,
  petTypeByIdUrl,
} from "@/utils/common";
export default {
  props: {
    petPublishDialog: {
      type: Boolean,
      default: false,
    },
    popPetPublish: {
      type: Object,
      default: null,
    },
    operateType: {
      type: String,
      default: () => "",
    },
  },
  watch: {
    popPetPublish: {
      handler(n, o) {
        console.log(o);
        this.petPublish = n;
        console.log("hahah", n);
      },
      immediate: true,
    },
  },
  components: {},
  data() {
    return {
      loading: false,
      petPublish: {},
      userList: [],
      typeList: [],
    };
  },
  mounted() {},
  methods: {
    loadUser(userId) {
      //加载单个用户
      const _self = this;
      this.axios.post(replaceUrlParam(userByIdUrl, [userId])).then((res) => {
        if (res.data.status == "SUCCESS" && res.data.data) {
          _self.petPublish.userName = res.data.data.userName;
        }
      });
    },
    loadPetType(typeId) {
      const _self = this;
      this.axios.post(replaceUrlParam(petTypeByIdUrl, [typeId])).then((res) => {
        if (res.data.status == "SUCCESS" && res.data.data) {
          _self.petPublish.typeName = res.data.data.typeName;
        }
      });
    },
    verify(publishStatus) {
      let _this = this;
      this.petPublish.publishStatus = publishStatus;
      let operateText =
        publishStatus == 3 ? "通过" : publishStatus == 2 ? "不通过" : "禁播";
      // 执行操作前询问
      _this.$model(`确定${operateText}吗`, "确定", true, "", "提示")
        .then((resp) => {
          console.log(resp);
          switch (publishStatus) {
            case 3: // 通过
            case 4: // 禁播
              delete _this.petPublish.remark;
              _this.saveService();
              break;
            case 2:
              _this.$prompt(
                `请输入不通过原因`,
                "确定",
                true,
                "",
                "提示",
                /\S/,
                "请输入不通过原因"
              )
                .then((res) => {
                  _this.petPublish.remark = res;
                  _this.saveService();
                })
                .catch((err) => {console.error(err)});
              break;
          }
        })
        .catch((err) => {console.error(err)});
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {
    //       this.saveService();
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    saveService() {
      this.loading = true;
      this.axios
        .post(petPublishSaveUrl, this.petPublish)
        .then((res) => {
          if (res.data.status == "SUCCESS") {
            this.loading = false;
            this.$emit("close");
            this.$message.success(res.data.result);
          } else {
            this.loading = false;
            this.$message.error(res.data.result);
          }
        })
        .catch((response) => {
          this.loading = false;
          console.log("response - " + response);
          this.$message.error("操作失败");
        });
    },
    changeHandler(value) {
      this.petPublish.publishContent = value;
    },
    closeHandler: function () {
      this.$emit("close");
    },
    changeIcons(image) {
      this.petPublish.publishPath = image;
      this.indoorPhoto = "";
    },
  },
};
</script>

<style lang="less" scoped>
.form-item-time {
  /deep/.el-form-item__content {
    text-align: left;
  }
}
/deep/.el-carousel__button {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
video {
  display: block;
  width: 100%;
}
.el-carousel__item {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.work-box {
  padding: 0 40px;
  .work-des {
    padding-left: 50px;
    border-left: 1px solid #eee;
    margin-left: 50px;
    width: 50%;
  }
}
.mobile {
  background-image: url("../../assets/bg-mobile.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 310px;
  height: 600px;
  padding: 55px 23px 60px 20px;
  box-sizing: border-box;
  position: relative;

  .banner {
  }
  .content {
    font-size: 14px;
    padding: 10px 15px;
  }
  .footer {
    position: absolute;
    bottom: 50px;
    left: 22px;
    width: 84%;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 30px;
    .name {
      padding-left: 5px;
    }
  }
}
</style>
